html {
    font-family: sans-serif;
    font-size: 100%;
    height: 100%;
}
body {
    color: #20202b;
    font-family: "Poppins",serif;
    font-size: 1em;
    line-height: 1.6875;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
}
a {
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}
a:active, a:hover {
    outline: 0 none;
}
#page{
    overflow: auto;
}
#content, #main, #page, #primary {
    min-height: 100%;
}
#bar {
    background: rgba(198, 198, 198, 0.04) none repeat scroll 0 0;
    color:#FFFFFF;
    font-family: "DIN",sans-serif;
    font-size: 0.75em;
    height: 100%;
    left: 2rem;
    letter-spacing: 0.15em;
    line-height: 1;
    opacity: 0.9;
    position: fixed;
    text-transform: uppercase;
    top: 0;
    transition: opacity 2.5s ease 0s;
    width: 4rem;
    z-index: 22;
}
.app-start #bar {
    opacity: 1;
}
#bar .point, #bar::before {
    left: 50%;
    position: absolute;
    width: 0;
}
#bar::before {
    border-left: 1px solid;
    content: "";
    display: block;
    height: 100%;
    opacity: 0.35;
    top: 0;
}
#bar .point {
    backface-visibility: hidden;
    border: 0.2rem solid;
    display: inline-block;
    height: 0;
    top: 25%;
    transform: translate3d(-50%, -50%, 0px);
}
#bar .point:nth-child(1) {
    top: 50%;
}
#bar .point:nth-child(2) {
    top: 75%;
}
#bar > span {
    cursor: pointer;
    display: block;
    left: 50%;
    position: absolute;
    top: 12.5%;
    transform: translate3d(-50%, -50%, 0px);
}
#bar > span:nth-child(5) {
    top: 37.5%;
}
#bar > span:nth-child(6) {
    top: 62.5%;
}
#bar > span:nth-child(7) {
    top: 87.5%;
}
#bar > span::after, #bar > span::before {
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
}
#bar > span::before {
    content: "0" attr(data-level);
    transform: translate3d(1.6rem, -50%, 0px);
    transition: transform 1s cubic-bezier(0.73, -0.03, 0.3, 1.02) 0s;
}
#bar > span.active::before, #bar > span:hover::before {
    transform: translate3d(-2.3rem, -50%, 0px);
}
#bar > span::after {
    border-bottom: 1px solid;
    content: "";
    height: 0;
    opacity: 0.35;
    transform: translate3d(-50%, -50%, 0px);
    transition: width 0.35s cubic-bezier(0.69, -0.51, 0.75, -0.49) 0s;
    width: 1rem;
}
#bar > span.active::after, #bar > span:hover::after {
    width: 2rem;
}
#bar > span > span {
    display: block;
    opacity: 0;
    position: relative;
    transform: matrix(1, 0, 0, 1, 30, 0);
    transition: opacity 0.615s ease 0s, transform 1s cubic-bezier(0.73, -0.03, 0.3, 1.02) 0s;
    width: 3rem;
}
#bar > span.active > span, #bar > span:hover > span {
    opacity: 1;
    transform: matrix(1, 0, 0, 1, 48, 0);
}
#bar > span > i, #loading::before {
    background-color: #ac9766;
    display: block;
    position: absolute;
}
#bar > span > i {
    height: 4rem;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0px) scaleY(0);
    transition: transform 1s cubic-bezier(0.73, -0.03, 0.3, 1.02) 0s;
    width: 0.4rem;
    z-index: 2;
}
#bar > span.active > i {
    transform: translate3d(-50%, -50%, 0px) scaleY(1);
}
.scroll,.panel{
    width:100%;
    height:100%;
    position:relative;
    text-align:center;
    padding-top:250px;
}
.scroll{
    left:0;
    top:0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    color:#e23a6e;
    font-weight:bold;
}
.panel{
    background:#fff;
    overflow: hidden;
}
/*动画*/
#nav1:checked ~ .scroll #panel1 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav2:checked ~ .scroll #panel2 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav3:checked ~ .scroll #panel3 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav4:checked ~ .scroll #panel4 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
#nav5:checked ~ .scroll #panel5 h1{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}